<template>
  <div>

    <!--回复留言的弹窗-->
    <el-dialog title="评论回复:" :visible.sync="dialogFormVisible">
      <!--<el-form :model="form">-->
      <el-form>
        <el-input
          class="reply_target"
          v-model="replyName"
          :disabled="true">
        </el-input>

        <section>
          <!--:value="myText"-->
          <vue-emoji ref="emoji" width="400" @input="onInput" :value="myText"/>
        </section>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitMyReply()">确 定</el-button>
      </div>


    </el-dialog>


    <ul class="history_msg">
      <el-scrollbar ref="scrollbar" style="height:100%">
        <li v-for="(msg,index) in  msgList">
          <el-divider content-position="center">{{index==0?'顶':index+1}}楼</el-divider>
          <div class="msg">
            <el-avatar :size="40" :src="msg.avatarImg"></el-avatar>
            <p class="msg_content">
            <p class="leave_msger">{{msg.nickName}}</p>
            <p class="msg_word">{{msg.content}}</p>
            <p class="msg_time"><span>{{msg.createTime}}</span> &nbsp; &nbsp;&nbsp;&nbsp; <span
              class="el-icon-location-information"></span> {{msg.address}}
              &nbsp; &nbsp;&nbsp;&nbsp;<a href="javascript:;" @click='replyMsg(msg.id,msg.nickName,index)'>回复</a>
            </p>
            </p>
            <hr style="float: left;margin-left: 40px;width: 100%;margin-top: 5px">
            <div class="msg_child" v-for="(child) in  msg.childrenMsg">
              <el-avatar :size="40" :src="child.avatarImg"></el-avatar>
              <div class="child_reply">
                <span style="color: #01AAED">{{child.nickName}}</span> 回复 <span
                style="color: #01AAED">@{{msg.nickName}}</span> <span>{{child.content}}</span>
              </div>
              <p class="chiil_msg_time">{{child.createTime}}
                &nbsp; &nbsp;&nbsp;&nbsp;
                <span class="el-icon-location-information"></span> {{child.address}}
              </p>
            </div>


          </div>
        </li>
      </el-scrollbar>
    </ul>

  </div>
</template>

<script>
  import VueEmoji from '../common/VueEmoji'
  import commonUtils from '../common/commonUtils'

  export default {
    name: 'histroyMsg',
    data () {
      return {

        dialogFormVisible: false,
        // pack: packData
        replyName: '',
        replyId: '',
        arrayIndex: '',
        myText: '',
        myTextValue: ''

      }
    },
    methods: {

      replyMsg (id, name, index) {    // 点击回复触发的函数。
        console.log(event)
        console.log(id)
        console.log(name)
        this.replyId = id
        this.replyName = '@' + name
        this.arrayIndex = index
        this.dialogFormVisible = true
      },
      submitMyReply (event) {   //提交评论。
        if (!this.$store.state.name) {
          commonUtils.AlertErrorMsg('回复前,请先留名喔。。')
          return
        }

        // console.log(this.$refs.emoji.value)
        // console.log(this.$refs.emoji)
        console.log('====>' + this.myTextValue)
        console.log(this.myText)
        if (!this.myTextValue) {

          commonUtils.AlertErrorMsg('先说点什么吧！！！')
          return
        }
        if (!this.replyId) {
          commonUtils.AlertErrorMsg('评论失败!请联系管理员!!')
          return
        }
        console.log('text=' + this.myTextValue)
        var params = {
          parent: this.replyId,
          content: this.myTextValue,
          nickName: this.$store.state.name,
          email: this.$store.state.email,
          avatar: this.$store.state.avatar
        }
        this.submitMsg(params)

      },
      submitMsg: function (params) {
        var _this = this
        var loading = commonUtils.AlertLoading('正在邮件通知对方,请稍后。。。')
        this.axios.post('/msg/saveChildReply', params)
          .then(function (success) {
            if (success.data.code == 0) {

              //dispatch 中提交。
              _this.$store.dispatch('saveChildReply', {msg: success.data.result, arrayIndex: _this.arrayIndex})

              //将相关参数置为0
              _this.replyId = ''
              _this.replyName = ''
              _this.arrayIndex = ''
              // _this.myText = '';  这样无法清空，调用官方的代码。
              _this.clearTextarea()
              console.log(_this.myText)
              _this.myTextValue = ''
              _this.dialogFormVisible = false //取消弹框
              commonUtils.AlertSuccessMsg('回复成功!')
            }
            loading.close()
          }).catch(function (error) {
          commonUtils.AlertErrorMsg('评论失败啦!!!')
          loading.close()
        })
      },

      clearTextarea () {        //这两个方法和emjo 插件有关。
        this.$refs.emoji.clear()
      },
      onInput (event) {
        console.log(event)
        console.log(event.data)
        this.myTextValue = event.data
      },
      //滚动条的懒加载。
      lazyLoading () {

        var value = this.$refs['scrollbar'].wrap.scrollTop   //滚动条距离顶部的距离
        var height = this.$refs['scrollbar'].wrap.scrollHeight //总的高度。
        // console.log(value + '===' + height)
        if ((height - 600) - value <= 30) {
          if (this.$store.state.scrollFlag && this.$store.state.pageNum < this.$store.state.totalMsgPage) {
            //发送请求
            this.flag = false
            console.log('执行懒加载。。。。')
            this.$store.dispatch('increateNum').then(() => {
              this.$store.dispatch('initPage')
            })

          }
        }

      }
    },
    components: {
      'vue-emoji': VueEmoji
    },
    computed: {
      msgList () {
        console.log(this.$store.state.visitorMsgList.length)
        return this.$store.state.visitorMsgList
      }
    },
    mounted () {
      //页面一加载，就初始化第一也数据。
      this.$store.dispatch('initPage')
      window.addEventListener('scroll', this.lazyLoading, true)
    },
    destroyed () {
      window.removeEventListener('scroll', this.lazyLoading, true)
    }

  }
</script>

<style scoped>
  .history_msg {
    /*background-color: blueviolet;*/
    margin: 2px;
    float: left;
    /*background-color: blue;*/
    min-height: 300px;
    height: 600px;
    /*overflow: hidden;*/

  }

  .history_msg li {
    list-style: none;
    padding-top: 1px;
  }

  .history_msg li .el-divider {
    margin-top: 15px;
    margin-bottom: 10px;
    float: left;
  }

  .el-divider {
    background-color: blue;
  }

  .msg {
    width: 100%;
    min-height: 100px;
    /*background-color: blue;*/
    float: left;
    position: relative;
    overflow: hidden;
  }

  .msg .el-avatar {
    float: left;
  }

  .msg .msg_content {
    /*position: absolute;*/
    float: left;
    margin-left: 10px;
  }

  .leave_msger {
    color: #01AAED;
    font-size: 14px;
    text-indent: 16px;
  }

  .msg_word {
    min-height: 50px;
    text-align: left;
    font-size: 16px;
    text-indent: 16px;
  }

  .msg_time {
    font-size: 13px;
    height: 15px;
    margin-left: 36px;
  }

  .msg_time a {
    text-decoration: none;
    color: #009688;
  }

  .msg_time a:hover {
    cursor: pointer;
    color: #01AAED;
    font-size: 14px
  }

  .msg_child {
    width: 100%;
    float: left;
    margin-left: 40px; /*最小宽度必须设置为40px 和头像一样高，否则漂浮 被挤变形*/
    margin-top: 10px;
    font-size: 14px;
  }

  .msg_child .el-avatar {
    float: left;
  }

  .child_reply {
    width: 80%;
    min-height: 40px;
    text-align: justify;
    float: left;
    margin-left: 1%;
  }

  .chiil_msg_time {
    float: left;
    font-size: 12px;
    margin-left: 10%;
    margin-top: 5px;
  }


  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .reply_target {
    width: 30%;
  }


  /*----头像旋转----*/
  .msg .el-avatar:hover{
    transform: rotate(-360deg);
    transition-duration:0.5s;
    transition-timing-function: linear;

  }
  .msg_child .el-avatar:hover{
    transform: rotate(360deg);
    transition-duration:0.5s;
    transition-timing-function: linear;

  }



</style>
